<script setup lang="ts">
import { onMounted, ref } from "vue"
import LogTable from "./components/table.vue"
import { reqLoginTypes, reqLoginlist } from "@/api/Loginfo/Loginfo"
import type {
  LoginListItems,
  LoginListResponseData,
  LoginResultData,
} from "@/api/types/Loginfo"

// 当前页
const current = ref(1)
// 请求长度
const limit = ref(5)
// 总长度
const total = ref(0)
// 登陆信息列表
const loginListInfo = ref<LoginListItems[]>([])
// 登陆人列表
const loginPerson = ref<string[]>([])
// 登陆设备列表
const loginTypes = ref<string[]>([])
// 登陆人
const person = ref("")
// 设备
const types = ref("")
// 登陆时间
const selectTime = ref("")

// 获取类型下拉数据
const getLoginTypes = async () => {
  const result: LoginResultData = await reqLoginTypes()
  loginPerson.value = result.data.person
  loginTypes.value = result.data.equipment
}
// 登陆列表
const getLoginList = async (pages = 1) => {
  current.value = pages
  const params = {
    current: current.value,
    limit: limit.value,
    person: person.value,
    types: types.value,
    loginTime: selectTime.value,
  }
  const result: LoginListResponseData = await reqLoginlist(params)
  loginListInfo.value = result.data.result
  current.value = +result.data.current
  limit.value = +result.data.limit
  total.value = +result.data.total
}
const changePerson = async (e: string) => {
  person.value = e
  await getLoginList()
  ElMessage.success("查询成功")
}
const changeTypes = async (e: string) => {
  types.value = e
  await getLoginList()
  ElMessage.success("查询成功")
}
const changeTime = async () => {
  await getLoginList()
  ElMessage.success("查询成功")
}
// 列表长度
const handleSizeChange = () => {
  getLoginList()
}

onMounted(() => {
  getLoginTypes()
  getLoginList()
})
</script>

<template>
  <div class="log">
    <el-card>
      <el-form>
        <el-row>
          <el-col :span="7" v-has="`Log.btn.person`">
            <el-form-item label="登陆人">
              <el-select
                @change="changePerson"
                v-model="person"
                placeholder="请选择登陆人"
                clearable
              >
                <el-option
                  v-for="(item, index) in loginPerson"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-has="`Log.btn.equipment`">
            <el-form-item label="登陆设备">
              <el-select
                @change="changeTypes"
                v-model="types"
                placeholder="请选择登陆人"
                clearable
              >
                <el-option
                  v-for="(item, index) in loginTypes"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-has="`Log.btn.Time`">
            <el-form-item label="登陆时间">
              <el-date-picker
                v-model="selectTime"
                @change="changeTime"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <LogTable :loginListInfo="loginListInfo" />
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getLoginList"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.log {
  .el-card {
    margin-bottom: 20px;
    .el-pagination {
      margin-top: 20px;
    }
  }
  .el-form-item {
    margin: 0px 20px;
  }
}
</style>
